<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="jquery.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/index.js" defer></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        li{
            list-style-type:none;
        }
        a{
            text-decoration:none;
        }
        a:visited,a:active{
            text-decoration: none;
        }
        img{
            vertical-align:middle;
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
        .clearfix:after{
            content:"";
            display:table;
            clear:both;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        /*产品*/
        .product{
            width:50%;
            padding:0.15rem;
            box-sizing: border-box;
        }
        .product img{
            width:100%;
            opacity:0.1;
            transition:all 1s;
        }

        #loading{
            box-shadow:3px 3px 3px 10px white;
            background:white;
            border-radius:5px;
            text-align:center;
            line-height:2rem;
        }
        #d1{
            position:fixed;
            z-index:9999;
            width:100%;
            height:100%;
            background:transparent;
            display:none;
            align-items: center;
            justify-content: center;
        }
        #productList{
            display: none;

        }
        #cnt{
            overflow-y: auto;
            height: 14.77777777777778rem;
        }
        ::-webkit-scrollbar{
            display: none;
        }

        /*top样式*/
        .top{
            height:1.5rem;
            color:white;
            background-image: linear-gradient(45deg,orange,orangered);

        }
        form{
            width: 100%;
            height: 100%;
        }
        .top form{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .aa{
            display: block;
            margin: 0 auto;
        }
        .bb{
            width: 1.2rem;
        }
        .top form p{
            text-align: center;
        }
        .searchbox{
            border-bottom: 2px solid white;
            height: 1rem;
            width: 6rem;
            text-align:center;

        }
        #searchlan{
            width: 80%;
            border: none;
            outline: none;
            background: transparent;
            display: block;
            margin: 0 auto;
            position: relative;
            top: 0.4rem;
            color:#fff;
            font-size:16px;
        }
        /*banner*/
        .banner{
            width: 100%;
        }
        .banner img{
            width: 100%;
        }
        /*分类*/
        .fenlei{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
        }
        .fenlei a{
            display: block;
            width: 20%;
        }
        .fenlei a img{
            width: 100%;
        }
        /*底部样式*/
        .bottom{
            position: fixed;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 1.5rem;
            background:white;
            border-top: 1px solid #cccccc;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-sizing: border-box;
        }
        .bottom p{
            height: 24px;
            line-height: 24px;
        }
        .bottom a{
            display: inline-block;
            width: 1.25rem;
            color: #333333;
            text-align: center;
        }
        .bottom a:active{
            text-decoration:none;
        }

        .bottom a img{
            width: 55%;
            display: block;
            margin: 0 auto;
        }
        .rocketbox{
            width: 0.95rem;
            height: 2.45rem;
            background:url("images/rocket.png") no-repeat;
            background-size: cover;
        }
        .modal-button{
            color:orangered!important;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="top">
        <form>
            <div class="bb">
                <img width="70%" src="images/二维码.png" class="aa"/>
                <p>扫一扫</p>
            </div>
            <div class="searchbox clearfix" >
                <input id="searchlan" autocomplete="off"/>
                <img class="fr" src="images/搜索2.png" width="10%" id="aa">
            </div>
            <div class="bb">
                <img width="70%" src="images/对话.png" class="aa"/>
                <p>消息</p>
            </div>

        </form>
    </div>
    <div id="cnt">
        <div id="productList" class="clearfix">
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/banner_01.jpg" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="images/banner_02.jpg" alt="Second slide">
                    </div>
                    <div class="item">
                        <img src="images/banner_01.jpg" alt="Third slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <div class="fenlei">
                <a>
                    <img src="images/icon__classify_01.jpg"/>
                    <span></span>
                </a>
                <a>
                    <img src="images/icon__classify_02.jpg"/>
                    <span></span>
                </a>
                <a>
                    <img src="images/icon__classify_03.jpg"/>
                    <span></span>
                </a>
                <a>
                    <img src="images/icon__classify_04.jpg"/>
                    <span></span>
                </a>
                <a>
                    <img src="images/icon__classify_05.jpg"/>
                    <span></span>
                </a>
                <a>
                    <img src="images/icon__classify_06.jpg"/>
                    <span></span>
                </a>
                <a>
                    <img src="images/icon__classify_07.jpg"/>
                    <span></span>
                </a>
                <a>
                    <img src="images/icon__classify_08.jpg"/>
                    <span></span>
                </a>
                <a>
                    <img src="images/icon__classify_09.jpg"/>
                    <span></span>
                </a>
                <a>
                    <img src="images/icon__classify_10.jpg"/>
                    <span></span>
                </a>
            </div>
        </div>
        <div id="loading2" style="text-align:center;height:1rem;display:none">
            <img style="vertical-align: middle" src="images/timg.gif" height="90%" /> 正在加载 ...
        </div>
    </div>
<div class="bottom">
    <a href="index.html">
        <img src="images/首页1.png">
        <p style="color:#ff572b;">首页</p>
    </a>
    <a href="cat.html">
        <img src="images/icon_classify.png">
        <p>分类</p>
    </a>
    <a href="cart.html">
        <img src="images/购物车.png">
        <p>购物车</p>
    </a>
    <a>
        <img src="images/我的.png">
        <p>我的</p>
    </a>
</div>
</div>

<!--加载-->
<div id="d1">
    <div id="loading"><img src="images/timg.gif" width="70%" /></div>
</div>



<div class="rocketbox" onclick="toTop()" style="position:fixed;right:0;top:50%;z-index: 99">

</div>
</body>
</html>